﻿@namespace ChatGpt.Shared

@page "/"
@inject StorageJsInterop StorageJsInterop
@inject ChatGptJsInterop ChatGptJsInterop
@inject ApiClient ApiClient
@inject I18n I18n

<MApp Dark="ChatGptOptions.Dark" Id="inspire">
    <MNavigationDrawer  @bind-Value="MiniVisible" App Dark="ChatGptOptions.Dark">
        <Dialogues OnClick="OnClickAsync" @bind-DialoguesModule="DialoguesModule" />
    </MNavigationDrawer>

    <MAppBar Dark="ChatGptOptions.Dark" App>

        <MTooltip Bottom>
            <ActivatorContent>
                <MButton @attributes="@context.Attrs" OnClick="() => MiniVisible = !MiniVisible" Icon>
                    <MIcon>
                        @(MiniVisible ? "mdi-dock-left" : "mdi-dock-right")
                    </MIcon>
                </MButton>
            </ActivatorContent>
            <ChildContent>
                @(MiniVisible ? I18n.T("Index.MiniVisible.Dialogues.Hide") : I18n.T("Index.MiniVisible.Dialogues.Show"))
            </ChildContent>
        </MTooltip>
        <MToolbarTitle>@DialoguesModule?.Title</MToolbarTitle>
        <MSpacer></MSpacer>
        
        <Language OnLanguageChanged="OnLanguageChanged" />

        <MTooltip Bottom>
            <ActivatorContent>
                <MButton @attributes="@context.Attrs" Dark="ChatGptOptions.Dark" OnClick="SerDark" Icon>
                    <MIcon>
                        @(ChatGptOptions.Dark ? "mdi-white-balance-sunny" : "mdi-weather-night")
                    </MIcon>
                </MButton>
            </ActivatorContent>
            <ChildContent>
                @(ChatGptOptions.Dark ? I18n.T("Dark.Hint") : I18n.T("Bright.Hint"))
            </ChildContent>
        </MTooltip>

        <MMenu Bottom
               Left>
            <ActivatorContent>
                <MButton Dark
                          Icon
                         Color="@(ChatGptOptions.Dark ? "" : "rgba(32,33,35,.5)")"
                @attributes="@context.Attrs">
                    <MIcon>mdi-dots-vertical</MIcon>
                </MButton>
            </ActivatorContent>

            <ChildContent>
                <MList>
                    <Settings @bind-Value="settingVisible"
                              OnSave="HandleOnSaveSetting"
                              OnCancel="HandleOnCancelSetting"
                    @bind-ChatGptOptions="ChatGptOptions" />
                    <MListItem OnClick="OnClear">
                        <MListItemContent>
                            <MListItemTitle>
                                @I18n.T("Dialogues.Empty.Hint")
                            </MListItemTitle>
                        </MListItemContent>
                    </MListItem>
                </MList>
            </ChildContent>
        </MMenu>
    </MAppBar>

    <MMain Style="@(ChatGptOptions.Dark?"background-color: #363636;":"background-color: ghostwhite;")">
        <CahtMessage ChatGptOptions="ChatGptOptions" OnCopy="OnCopy" @bind-Messages="Messages" @ref="Message" />
    </MMain>
    <SendMessage ChatGptOptions="ChatGptOptions" SubmitChanged="OnSubmit" />
    <PEnqueuedSnackbars @ref="_enqueuedSnackbars"></PEnqueuedSnackbars>
</MApp>

<style>
    /* 隐藏默认滚动条 */
    ::-webkit-scrollbar {
        display: none;
    }

    /* 自定义滚动条样式 */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        background-color: #f5f5f5;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 5px;
    }

        /* 滚动条滑块悬停状态 */
        ::-webkit-scrollbar-thumb:hover {
            background-color: #999;
        }

    /* 滚动条角落 */
    ::-webkit-scrollbar-corner {
        background-color: #f5f5f5;
    }
    
</style>